<template>
    <div class="app-container">
        <div class="searchAll" slot="search">
            <el-form :model="queryParams" ref="queryForm" label-position="right" label-width="68px">
                <el-row :gutter="20">
                    <el-col :span="6">
                        <el-form-item :label="$t('postManage.postName')" prop="postName">
                            <el-input v-model="queryParams.postName" :placeholder="$t('public.placeholder',{placeholder:$t('deptManage.deptName')})" clearable size="small" @keyup.enter.native="handleQuery" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item :label="$t('public.status')" prop="state">
                            <el-select v-model="queryParams.state" :placeholder="$t('public.select_holder',{select_holder: $t('deptManage.deptStatus')})" clearable size="small" style="width:100%">
                                <el-option v-for="dict in dict.type.sys_normal_disable" :key="dict.value" :label="dict.label" :value="dict.value" />
                            </el-select>
                        </el-form-item>
                    </el-col>

                    <el-col :span="6">
                        <div class="searchAres searchAresHeng">
                            <el-button type="primary" icon="el-icon-search" size="mini" class="searchBtn" @click="handleQuery">{{ $t("public.query") }}</el-button>
                            <el-button class="resectBtn" icon="el-icon-refresh" size="mini" @click="resetQuery">{{ $t("public.reset") }}</el-button>
                        </div>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <div class="tableList">
            <div class="insTitle">
                <span>职级管理</span>
            </div>
            <div class="btnGroup">
                <el-button v-hasPermi="['ny-iqc:post:add']" type="primary" icon="el-icon-plus" size="mini" class="additemBtn" @click="handleAdd">{{ $t("public.add") }}</el-button>
                <el-button icon="el-icon-sort" size="mini" class="resectBtnsort" @click="toggleExpandAll">{{$t('deptManage.openOrClosed')}}</el-button>

            </div>
            <el-table v-if="refreshTable" v-loading="loading" :data="tableDatas" stripe row-key="id" :default-expand-all="isExpandAll" :tree-props="{children: 'listPost', hasChildren: 'hasChildren'}">
                <el-table-column prop="postName" :label="$t('postManage.postName')" align="center"></el-table-column>

                <el-table-column prop="sort" :label="$t('deptManage.sort')" align="center"></el-table-column>
                <el-table-column prop="state" :label="$t('public.status')" align="center">
                    <template slot-scope="scope">
                        <dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.state" />
                    </template>
                </el-table-column>
                <el-table-column prop="materialMiddleName" show-overflow-tooltip :label="$t('defectIncoming.materialMiddle')" align="center"></el-table-column>
                <el-table-column :label="$t('public.createTime')" align="center" prop="createTime">
                    <template slot-scope="scope">
                        <span>{{ parseTime(scope.row.createTime) }}</span>
                    </template>
                </el-table-column>
                <el-table-column :label="$t('public.opera')" fixed="right" align="center">
                    <template slot-scope="scope">
                        <div class="action-wrap">
                            <table-body-btn type="add" :name="$t('public.add')" @click.native="handleAdd(scope.row)" v-hasPermi="['ny-iqc:post:add']" />
                            <table-body-btn type="gwedit" :name="$t('public.edit')" @click.native="handleUpdate(scope.row)" v-hasPermi="['ny-iqc:post:edit']" />
                            <table-body-btn type="gwdelete" :name="$t('public.delete')" @click.native="handleDelete(scope.row)" v-hasPermi="['ny-iqc:post:remove']" />
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <rank-dialog v-if="rankVisiabled" :rowData="rowData" :isType="isType" :parentId="parentId" :open.sync="rankVisiabled" @refresh="getList()" :title="title" />
    </div>
</template>

<script>
import { getAllRank, deleteRank } from '@/api/system/rank'
import rankDialog from './dialog.vue'

export default {
    name: 'rankmana',
    dicts: ['sys_normal_disable'],
    components: { rankDialog },
    data() {
        return {
            // 遮罩层
            loading: true,
            // 导出遮罩层
            exportLoading: false,
            // 显示搜索条件
            showSearch: true,
            // 表格树数据
            tableDatas: [],
            // 部门树选项
            deptOptions: [],
            // 弹出层标题
            title: '',
            // 是否显示弹出层
            rankVisiabled: false,
            // 是否展开，默认全部展开
            isExpandAll: true,
            // 重新渲染表格状态
            refreshTable: true,
            // 查询参数
            queryParams: {
                postName: '',
                state: '',
            },
            fullscreen: false,
            isType: 1, //判断是不是创建第一级
            rowData: {},
            parentId: null,
        }
    },
    created() {
        this.getList()
    },
    methods: {
        /** 查询部门列表 */
        getList() {
            this.loading = true
            getAllRank(this.queryParams).then((response) => {
                this.tableDatas = response.data
                this.loading = false
            })
        },
        // 取消按钮
        cancel() {
            this.open = false
            this.reset()
        },
        // 表单重置
        reset() {
            this.resetForm('form')
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.getList()
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm('queryForm')
            this.handleQuery()
        },
        /** 新增按钮操作 */
        handleAdd(row) {
            this.isType = 1
            this.rowData = null
            this.parentId = row.id
            this.title = this.$t('postManage.addPost')
            this.rankVisiabled = true
        },
        /** 展开/折叠操作 */
        toggleExpandAll() {
            this.refreshTable = false
            this.isExpandAll = !this.isExpandAll
            this.$nextTick(() => {
                this.refreshTable = true
            })
        },
        /** 修改按钮操作 */
        handleUpdate(row) {
            this.isType = 2
            this.rowData = row
            this.title = this.$t('rule.modifyPosition')
            this.rankVisiabled = true
        },
        /** 删除按钮操作 */
        handleDelete(row) {
            if (!row.listPost || !row.listPost.length) {
                this.$modal
                    .confirm('是否删除岗位名称为"' + row.postName + '"数据项')
                    .then(function () {
                        return deleteRank(row.id)
                    })
                    .then(() => {
                        this.getList()
                        this.$modal.msgSuccess(this.$t('deptManage.delSuc'))
                    })
                    .catch(() => {})
            } else {
                this.$modal.msgError('存在下级岗位，不允许删除！')
            }
        },
    },
}
</script>
<style scoped>
.resectBtnsort {
    background: #f7f8fa;
}
.resectBtnsort ::v-deep i {
    color: #20b09f;
}
/* 20B09F */
</style>
